<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="井号" prop="wellname">
          <el-select v-model="queryInfo.wellname" filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in wellname"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="时间选择">-->
<!--          <el-date-picker-->
<!--            v-model="startEndTime"-->
<!--            end-placeholder="结束月份"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始月份"-->
<!--            type="monthrange"-->
<!--            value-format="yyyy-MM"-->
<!--            @change="changeTime"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-button type="primary" @click="drawCharts">查询</el-button>
      </el-form>
    </el-card>
    <el-card>
      <!--      <div id="myChart" :style="{width: '100%', height: '500px'}"></div>-->

      <el-table
        :data="tableData"
        :span-method="mergeCells"
        class="custom-table"
        border
        style="width: 100%"
      >
        <!-- 第一列：costType -->
        <el-table-column
          align="center"
          label="分类"
          prop="costType"
        >
          <template slot-scope="scope">
            <span class="costType" style="cursor: pointer" @click="openDialog(scope.row.costType)">{{
                scope.row.costType
              }}</span>
          </template>
        </el-table-column>

        <!-- 第二列：costName -->
        <el-table-column
          align="center"
          label="费用名称"
          prop="costName"
        >
<!--          <template slot-scope="scope">-->
<!--            <span class="costType" style="cursor: pointer" @click="openCostNameDialog(scope.row.costName)"-->
<!--            >{{ scope.row.costName }}</span>-->
<!--          </template>-->

        </el-table-column>

        <!-- 第三列：realCost -->
        <el-table-column
          :formatter="formatCost"
          align="center"
          label="单项费用(万元)"
          prop="realCost"
        />


        <!-- 第五列：成本合计 -->
        <el-table-column
          :formatter="formatCost"
          align="center"
          label="成本合计(万元)"
          prop="totalCost"
        />
        <el-table-column
          align="center"
          label="所占比例(%)"
          prop="realCostRatio"
        />

<!--        &lt;!&ndash; 第四列：fyxj &ndash;&gt;-->
<!--        <el-table-column-->
<!--          :formatter="formatCost"-->
<!--          align="center"-->
<!--          label="钻井费用(万元)"-->
<!--          prop="syfy"-->
<!--        />-->
<!--        &lt;!&ndash; 第四列：fyxj &ndash;&gt;-->
<!--        <el-table-column-->
<!--          :formatter="formatCost"-->
<!--          align="center"-->
<!--          label="试油费用(万元)"-->
<!--          prop="zjfy"-->
<!--        />-->

<!--        &lt;!&ndash; 第六列：小计合计 &ndash;&gt;-->
<!--        <el-table-column-->
<!--          :formatter="formatCost"-->
<!--          align="center"-->
<!--          label="小计合计(万元)"-->
<!--          prop="totalFyxj"-->
<!--        />-->


      </el-table>


    </el-card>


    <!--    弹窗-->
    <el-dialog
      :title="dialogTitle + '费用占比'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="60%"
    >
      <div>
        <div id="main" style="width: 50%; height: 500px"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

<!--    <el-dialog-->
<!--      :title="dialogTitle"-->
<!--      :visible.sync="costNameDialogVisible"-->
<!--      width="60%"-->
<!--    >-->
<!--      <div style="display: flex">-->
<!--        <div id="costNameMain" style="width: 50%; height: 600px"></div>-->
<!--        <div id="costNamePieMain" style="width: 50%; height: 600px"></div>-->
<!--      </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="costNameDialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="costNameDialogVisible = false">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>
<script>
import { getDictList, listBywellname } from "@/api/vadmin/budget/ledger/ledgerapi";
import { Decrypt } from "@/utils/AesHmacMD5";
import echarts from "echarts";

export default {
  name: "individual",
  data() {
    return {
      rawData: [],
      tableData: [],

      queryInfo: {
        wellname: "埕北古斜22"
      },
      startEndTime: "",
      wellname: [],

      //弹窗
      dialogVisible: false,
      costNameDialogVisible: false, //成本名称弹窗
      dialogTitle: "" //弹窗标题
    };
  },
  mounted() {
    this.getDict();
  },
  methods: {
    processData(data) {
      // 1. 只保留 costType 是 '钻井' 或 '试油' 的数据
      const filteredData = data.filter(item => item.costType === '钻井' || item.costType === '试油');

      // 2. 按 costType 排序
      const sortedData = filteredData.sort((a, b) => {
        if (a.costType < b.costType) return -1;
        if (a.costType > b.costType) return 1;
        return 0;
      });

      // 3. 分组并计算合计
      const grouped = sortedData.reduce((acc, item) => {
        const group = acc[item.costType] || { totalCost: 0, totalFyxj: 0, children: [] };
        group.totalCost += item.realCost;  // 计算每组的总 realCost
        group.totalFyxj += item.syfy + item.zjfy;
        group.children.push(item);
        acc[item.costType] = group;
        return acc;
      }, {});

      // 4. 展开分组数据并计算比例
      return Object.entries(grouped).flatMap(([key, value]) => {
        return value.children.map(child => {
          const realCostRatio = (value.totalCost > 0) ? (child.realCost / value.totalCost) : 0;  // 计算 realCost 在 totalCost 中的比例
          return {
            ...child,
            totalCost: value.totalCost,
            totalFyxj: value.totalFyxj,
            realCostRatio: `${(realCostRatio * 100 ).toFixed(2)}%`  // 添加比例字段
            // realCostRatio: realCostRatio * 100  // 添加比例字段
          };
        });
      });
    },

    // 合并单元格逻辑
    mergeCells({ row, column, rowIndex, columnIndex }) {
      if (column.property === "costType" || column.property === "totalCost" || column.property === "totalFyxj") {
        const costType = row.costType;
        const spanCount = this.tableData.filter(item => item.costType === costType).length;
        const isFirst = this.tableData.findIndex(item => item.costType === costType) === rowIndex;
        return isFirst ? [spanCount, 1] : [0, 0];
      }
    },
    // 格式化金额显示
    formatCost(row, column, cellValue) {
      return cellValue ? cellValue.toFixed(2) : "-";
    },

    //查询所有的区域 凹陷 井号
    getDict() {
      console.log("查询所有");
      getDictList(this.addDateRange("aa")).then(response => {
        let res = JSON.parse(Decrypt(response.data));
        //井号数组
        this.wellname = res.wellname.flat();
      });
    },
    // changeTime() {
    //   this.queryInfo.startTime = this.startEndTime[0];
    //   this.queryInfo.endTime = this.startEndTime[1];
    // },
    drawCharts() {
      console.log(this.queryInfo, "查询参数");
      listBywellname(this.addDateRange(this.queryInfo)).then(response => {
        let resData = JSON.parse(Decrypt(response.data));
        console.log(resData, "返回的数据");
        let chartData = [];
        resData.results.map(item => {
          //名字, 类型 实际成本 成本小计
          chartData.push({
            costName: item.cost_name,
            costType: item.cost_type,
            realCost: item.real_cost,
            syfy: item.syfy,
            zjfy: item.zjfy,
            // fyxj: item.fyxj
          });
        });

        console.log(chartData, "chartData图表用的数据");
        this.rawData = chartData;
        this.tableData = this.processData(this.rawData);
        console.log(this.tableData, '====');

        // // 聚合并转换成数组格式 =====> 按照类别进行一个总的图表
        // const aggregatedArray = chartData.reduce((acc, item) => {
        //   // 查找是否已存在该 costType
        //   let existingItem = acc.find(entry => entry.name === item.costType);
        //
        //   if (!existingItem) {
        //     // 如果不存在，创建一个新的对象并加入数组
        //     acc.push({
        //       name: item.costType,
        //       realCost: item.realCost,
        //       fyxj: item.fyxj
        //     });
        //   } else {
        //     // 如果已存在，累加数据
        //     existingItem.realCost += item.realCost;
        //     existingItem.fyxj += item.fyxj;
        //   }
        //
        //   return acc;
        // }, []);  // 使用空数组作为初始值

        // console.log(aggregatedArray);
        // this.drawBarChart(aggregatedArray)
      });
    },

    openDialog(row) {
      // console.log(row);
      const result = this.rawData.filter(item => item.costType === row);
      console.log(result);
      this.dialogTitle = row;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.drawBar(result,'main');
      });
    },
    // openCostNameDialog(row) {
    //   console.log(row);
    //   const result = this.rawData.filter(item => item.costName === row);
    //   console.log(result);
    //   this.dialogTitle = row;
    //   this.costNameDialogVisible = true;
    //
    //   let xData = [];
    //   let realCost = [];
    //   let fyxj = [];
    //
    //   result.map(item => {
    //     xData.push(item.costName);
    //     realCost.push(item.realCost);
    //     fyxj.push(item.fyxj);
    //   });
    //
    //   // console.log(xData, "x轴数据");
    //   this.$nextTick(() => {
    //     // this.drawBar(xData, realCost, fyxj,'costNameMain');
    //     // this.drawPie(result)
    //   });
    // },

    drawBar(data,id) {
      console.log(data );
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
      // 计算试油数据占比
      const seriesData = data.map(item => {
        if (item.costType === '试油') {
          return {
            name: item.costName,
            value: ((item.realCost / item.syfy) * 100).toFixed(2), // 计算占比,
            money: item.realCost
          };
        } else if (item.costType === '钻井') {
          return {
            name: item.costName,
            value: ((item.realCost / item.zjfy) * 100).toFixed(2), // 计算占比
            money: item.realCost
          };
        }
        return null;
      }).filter(item => item !== null); // 过滤掉没有计算占比的数据
      console.log(seriesData,'seriesData');
      // 你可以自定义颜色数组，添加更多颜色或修改它们
      const colors = [
        '#7ED3F4',  // 紫蓝色
        '#5C7BD9',  // 蓝色

        '#0e5d60',  // 柔和绿色
        '#e30b2c',  // 淡粉色
        '#ab8e29',  // 珊瑚橙
        '#FE7070',  // 明黄色
        '#40B27D'   // 淡绿色
      ];

      option = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // 根据 params.name 查找 seriesData 中对应的项
            const matchedItem = seriesData.find(item => item.name === params.name);
            // 这里 params.name 是 costName
            return `${params.name}: ${matchedItem.money}(万元) (${params.percent.toFixed(2)}%)`;
          },
        },
        legend: {
          //图例水平排列
          orient: 'horizontal',
          left: 'left',
          width: 'auto',  // 设置图例容器宽度，根据内容自适应
          itemWidth: 20,  // 设置图例标记的宽度
          itemHeight: 14, // 设置图例标记的高度
          data: seriesData.map(item => item.name),
          textStyle: {
            fontSize: 12,  // 设置图例文字的字体大小
          },
          formatter: function(name) {
            return name;  // 格式化图例项
          },
        },
        series: [
          {
            name: '成本占比',
            type: 'pie',
            radius: ['0%', '50%'],  // 外半径和内半径，控制饼图大小
            data: seriesData,
            minAngle: 20,  // 设置最小角度 //负责饼图比例划分
            label: {
              normal: {
                show: true,
                position: 'outside', // 标签显示位置
                formatter: function(params) {
                  // 根据 params.name 查找 seriesData 中对应的项
                  const matchedItem = seriesData.find(item => item.name === params.name);
                  // 这里 params.name 是 costName
                  return `${params.name}: \n ${matchedItem.money}(万元) \n (${params.percent.toFixed(2)}%)`;
                },
                fontSize: 12
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              // 使用颜色数组
              color: function(params) {
                return colors[params.dataIndex % colors.length];  // 使用颜色数组中的颜色
              }
            }
          }
        ]
      };

      // 使用刚定义的配置项和数据显示图表
      option && myChart.setOption(option);
    },








    // drawBar(xData, realCost, syfy,zjfy,id) {
    //   var chartDom = document.getElementById(id);
    //   var myChart = echarts.init(chartDom);
    //   var option;
    //   let colorList= ['#5470C6', '#ff0000', '#ff0000']
    //
    //   option = {
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //         crossStyle: {
    //           color: "#999"
    //         }
    //       }
    //     },
    //     grid: {
    //       left: '5%',
    //       right: '4%',
    //       bottom: '3%',
    //       top: '15%',
    //       containLabel: true
    //     },
    //       title: {
    //         text: this.dialogTitle + '成本费用分析',
    //       },
    //     legend: {
    //       data: ["实际成本", "钻井费用", "试油费用"]
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: xData,
    //         axisPointer: {
    //           type: "shadow"
    //         }
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: "log",
    //         name: "金额",
    //         axisLabel: {
    //           formatter: "{value} 万元"
    //         }
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "钻井费用",
    //         type: "bar",
    //         barWidth: '20%',
    //         color:colorList[1],
    //         tooltip: {
    //           valueFormatter: function(value) {
    //             return value + " 万元";
    //           }
    //         },
    //         data: zjfy,
    //         label: {
    //           show: true,
    //           position: "top",  // 'top' 表示在柱子的顶部显示标签
    //           formatter: "{c} 万元"  // 格式化显示的文本，可以添加单位或自定义样式
    //         }
    //       },
    //       {
    //         name: "试油费用",
    //         type: "bar",
    //         barWidth: '20%',
    //         color:colorList[1],
    //         tooltip: {
    //           valueFormatter: function(value) {
    //             return value + " 万元";
    //           }
    //         },
    //         data: syfy,
    //         label: {
    //           show: true,
    //           position: "top",  // 'top' 表示在柱子的顶部显示标签
    //           formatter: "{c} 万元"  // 格式化显示的文本，可以添加单位或自定义样式
    //         }
    //       },
    //       {
    //         name: "实际成本",
    //         type: "bar",
    //         tooltip: {
    //           valueFormatter: function(value) {
    //             return value + " 万元";
    //           }
    //         },
    //         barWidth: '20%',
    //         data: realCost,
    //         color:colorList[0],
    //         label: {
    //           show: true,
    //           position: "top",  // 'top' 表示在柱子的顶部显示标签
    //           formatter: "{c} 万元"  // 格式化显示的文本，可以添加单位或自定义样式
    //         }
    //       }
    //     ]
    //   };
    //
    //   option && myChart.setOption(option);
    // },

    // drawPie(data) {
    //   console.log(data, '传递过来的数据')
    //   var chartDom = document.getElementById('costNamePieMain');
    //   var myChart = echarts.init(chartDom);
    //   var option;
    //   let pieData = [
    //     { value: data[0].realCost, name: '实际成本' },
    //     { value: data[0].fyxj, name: '费用小计' },
    //   ]
    //   let colorList= ['#5470C6', '#ff0000']
    //
    //
    //   option = {
    //     title: {
    //       text: data[0].costName + '成本费用占比',
    //     },
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       orient: 'vertical',
    //       left: 'left',
    //       top: '30'
    //     },
    //     color: colorList,
    //
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: '50%',
    //         data: pieData,
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   };
    //
    //   option && myChart.setOption(option);
    // },
  }
};
</script>

<style scoped>
.costType:hover {
  font-weight: bold;
  color: #094bf3;
  text-decoration: underline;
}
.costType {
  color: #00afff;
}
::v-deep .custom-table .el-table__body-wrapper .el-table__row:nth-child(4) {
    border-bottom: 10px solid #b00e0e !important; /* 修改第4行的下边框 */
  }

</style>
